<div
  class="browse-title"
  *ngIf="
    (
      directories
      | directoryFilter: filterValue
      | directoryFilterStartLetterPipe: filterByStartCharValue
    ).length
  "
>
  <div class="flex-grow tracking-wide text-2xl">
    <span *ngIf="dirQp === '/'">Directories</span>
    <span *ngIf="dirQp !== '/'">{{ dirQpLabel }}</span>
  </div>
  <mat-icon
    (click)="toggleFilter()"
    *ngIf="dirQp === '/'"
    class="clickable"
    title="Filter directories by their starting letter"
    >filter_list
  </mat-icon>
</div>
<div *ngIf="filterVisible">
  <mat-divider></mat-divider>
  <div class="flex flex-row justify-between mb-2 tracking-tight text-sm">
    <mat-icon
      (click)="setStartLetterFilter('')"
      class="clickable accent-text-hover"
      >clear
    </mat-icon>
    <span
      (click)="setStartLetterFilter(letter)"
      [class.accent-text]="filterByStartCharValue === letter"
      *ngFor="let letter of letters"
      class="clickable accent-text-hover"
      >{{ letter }}</span
    >
  </div>
</div>

<div class="flex flex-col gap-y-2">
  <app-directory-entry
    *ngFor="
      let directory of directories
        | directoryFilter: filterValue
        | directoryFilterStartLetterPipe: filterByStartCharValue
        | slice: paginationFrom : paginationTo
    "
    [directory]="directory"
  ></app-directory-entry>

  <mat-paginator
    *ngIf="
      (directories | directoryFilter: filterValue).length > 0 &&
      paginationTo - paginationFrom <
        (directories | directoryFilter: filterValue).length
    "
    [length]="directories.length"
    (page)="getPaginatorData($event)"
    [pageSizeOptions]="pageSizeOptions"
    showFirstLastButtons="true"
    [pageSize]="paginationTo - paginationFrom"
  >
  </mat-paginator>
</div>

<!-- Cover grid -->
<div class="mt-24">
  <app-cover-grid
    [directories]="
      directories
        | directoryFilter: filterValue
        | directoryFilterStartLetterPipe: filterByStartCharValue
        | slice: paginationFrom : paginationTo
    "
    [dirQp]="dirQp"
  ></app-cover-grid>
</div>
